<template>
  <div class="search-filter">
    <div class="filter-container">
      <!-- 位置筛选 -->
      <div class="filter-item" @click="showLocationFilter">
        <span class="filter-text">{{ selectedLocationText }}</span>
        <img src="@/assets/imgs/arrow_down_3.png" alt="下拉" class="arrow-icon" />
      </div>
      
      <!-- 租金筛选 -->
      <div class="filter-item" @click="showRentRangeFilter">
        <span class="filter-text">{{ selectedRentRangeText }}</span>
        <img src="@/assets/imgs/arrow_down_3.png" alt="下拉" class="arrow-icon" />
      </div>
      
      <!-- 排序筛选 -->
      <div class="filter-item" @click="showSortFilter">
        <span class="filter-text">{{ selectedSortText }}</span>
        <img src="@/assets/imgs/arrow_down_3.png" alt="下拉" class="arrow-icon" />
      </div>
    </div>
    
    <!-- 位置筛选弹窗 -->
    <el-drawer
      v-model="locationDrawerVisible"
      title="选择位置"
      direction="btt"
      size="60%"
      class="filter-drawer"
    >
      <div class="location-cascader-wrap">
        <el-cascader
          v-model="tempLocationValue"
          :options="chinaAreaOptions"
          :props="{ checkStrictly: false, emitPath: true }"
          clearable
          filterable
          placeholder="请选择省 / 市 / 区"
          class="full-width"
        />
        <div class="filter-actions">
          <el-button @click="resetLocation">重置</el-button>
          <el-button type="primary" @click="confirmLocation">确定</el-button>
        </div>
      </div>
    </el-drawer>
    
    <!-- 租金筛选弹窗 -->
    <el-drawer
      v-model="rentRangeDrawerVisible"
      title="选择租金"
      direction="btt"
      size="60%"
      class="filter-drawer"
    >
      <div class="filter-content">
        <div class="filter-options">
          <div 
            v-for="rentRange in rentRangeOptions"
            :key="rentRange.value"
            class="option-item"
            :class="{ active: filterState.rentRange === rentRange.value }"
            @click="selectRentRange(rentRange.value)"
          >
            {{ rentRange.label }}
          </div>
        </div>
        <div class="filter-actions">
          <el-button @click="resetRentRange">重置</el-button>
          <el-button type="primary" @click="confirmRentRange">确定</el-button>
        </div>
      </div>
    </el-drawer>
    
    <!-- 排序筛选弹窗 -->
    <el-drawer
      v-model="sortDrawerVisible"
      title="选择排序"
      direction="btt"
      size="60%"
      class="filter-drawer"
    >
      <div class="filter-content">
        <div class="filter-options">
          <div 
            v-for="sort in sortOptions"
            :key="sort.value"
            class="option-item"
            :class="{ active: filterState.sortBy === sort.value }"
            @click="selectSort(sort.value)"
          >
            {{ sort.label }}
          </div>
        </div>
        <div class="filter-actions">
          <el-button @click="resetSort">重置</el-button>
          <el-button type="primary" @click="confirmSort">确定</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, computed, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
// 全国省市区数据
import { regionData, CodeToText } from 'element-china-area-data'

const props = defineProps({
  filterState: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['update:filterState', 'filter-change'])

// 抽屉显示状态
const locationDrawerVisible = ref(false)
const rentRangeDrawerVisible = ref(false)
const sortDrawerVisible = ref(false)

// 临时选择状态
const tempFilterState = reactive({
  location: '',
  rentRange: '',
  sortBy: ''
})

// 省市区级联数据
const chinaAreaOptions = regionData

// 临时 location 值：存放省市区行政区划代码数组，例如 ['110000','110100','110101']
const tempLocationValue = ref([])

// 监听级联选择变化，同步到临时状态
watch(tempLocationValue, (newValue) => {
  tempFilterState.location = newValue
}, { deep: true })


const rentRangeOptions = [
  { label: '不限', value: '' },
  { label: '1000以下', value: '0-1000' },
  { label: '1000-2000', value: '1000-2000' },
  { label: '2000-3000', value: '2000-3000' },
  { label: '3000-4000', value: '3000-4000' },
  { label: '4000-5000', value: '4000-5000' },
  { label: '5000以上', value: '5000-999999' }
]

const sortOptions = [
  { label: '默认排序', value: '' },
  { label: '价格从低到高', value: '价格-asc' },
  { label: '价格从高到低', value: '价格-desc' },
  { label: '面积从小到大', value: '面积-asc' },
  { label: '面积从大到小', value: '面积-desc' }
]

// 计算显示文本
const selectedLocationText = computed(() => {
  const loc = props.filterState.location
  if (!loc) return '位置'
  if (Array.isArray(loc) && loc.length) {
    // 将行政区划代码转中文
    return loc.map(code => CodeToText[code] || '').filter(Boolean).join(' / ')
  }
  return '位置'
})


const selectedRentRangeText = computed(() => {
  const option = rentRangeOptions.find(item => item.value === props.filterState.rentRange)
  return option ? option.label : '租金'
})

const selectedSortText = computed(() => {
  const option = sortOptions.find(item => item.value === props.filterState.sortBy)
  return option ? option.label : '排序'
})

// 显示筛选器
const showLocationFilter = () => {
  tempLocationValue.value = Array.isArray(props.filterState.location) ? [...props.filterState.location] : []
  tempFilterState.location = tempLocationValue.value
  locationDrawerVisible.value = true
}


const showRentRangeFilter = () => {
  tempFilterState.rentRange = props.filterState.rentRange
  rentRangeDrawerVisible.value = true
}

const showSortFilter = () => {
  tempFilterState.sortBy = props.filterState.sortBy
  sortDrawerVisible.value = true
}

// 选择筛选项
// 级联选择由 v-model 直接更新 tempLocationValue


const selectRentRange = (value) => {
  tempFilterState.rentRange = value
}

const selectSort = (value) => {
  tempFilterState.sortBy = value
}

// 重置筛选项
const resetLocation = () => {
  tempLocationValue.value = []
}


const resetRentRange = () => {
  tempFilterState.rentRange = ''
}

const resetSort = () => {
  tempFilterState.sortBy = ''
}

// 确认筛选项
const confirmLocation = () => {
  const newLocation = [...tempLocationValue.value]
  const newState = { ...props.filterState, location: newLocation }
  emit('update:filterState', newState)
  locationDrawerVisible.value = false
  emit('filter-change', newState)
}


const confirmRentRange = () => {
  const newState = { ...props.filterState, rentRange: tempFilterState.rentRange }
  emit('update:filterState', newState)
  rentRangeDrawerVisible.value = false
  emit('filter-change', newState)
}

const confirmSort = () => {
  const newState = { ...props.filterState, sortBy: tempFilterState.sortBy }
  emit('update:filterState', newState)
  sortDrawerVisible.value = false
  emit('filter-change', newState)
}
</script>

<style scoped>
.search-filter {
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
  position: sticky;
  top: 56px;
  z-index: 99;
}

.filter-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  height: 44px;
}

.filter-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  min-width: 0;
  flex: 1;
  justify-content: center;
  transition: background-color 0.3s ease;
  padding: 6px 8px;
  border-radius: 4px;
}

.filter-item:hover {
  background-color: #f5f5f5;
}

.filter-text {
  font-size: 14px;
  color: #333;
  margin-right: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arrow-icon {
  width: 12px;
  height: 6px;
  object-fit: contain;
}

.filter-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.filter-options {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.option-item {
  padding: 12px;
  text-align: center;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  color: #333;
}

.option-item:hover {
  border-color: #409eff;
  background-color: #f0f8ff;
}

.option-item.active {
  border-color: #409eff;
  background-color: #409eff;
  color: #fff;
}

.filter-actions {
  display: flex;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}

.filter-actions .el-button {
  flex: 1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .filter-container {
    padding: 8px 12px;
  }
  
  .filter-item {
    padding: 4px 6px;
  }
  
  .filter-text {
    font-size: 12px;
  }
  
  .filter-options {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  
  .option-item {
    padding: 10px;
    font-size: 13px;
  }
}

/* Element Plus Drawer 样式覆盖 */
:deep(.el-drawer) {
  border-radius: 12px 12px 0 0;
}

:deep(.el-drawer__header) {
  padding: 16px 20px;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 0;
}

:deep(.el-drawer__title) {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

:deep(.el-drawer__body) {
  padding: 0;
}
</style>
